<!DOCTYPE html>
<html>
<head>
<title>Round Radar</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="container">
    <h3>Default Size</h3>
    <pre><code>
width: 200px;
height: 200px;
    </code></pre>

    <h3>Default</h3>
    <div id="round-radar-1" style="width: 200px; height: 200px;"></div>

    <h3>Options</h3>
    <div id="round-radar-2" style="width: 400px; height: 400px;"></div>

  </div>
</div>

<script type="text/javascript">

  zeu.Settings.fps = 120;

  var roundRadar1 = new zeu.RoundRadar(document.getElementById('round-radar-1'));
  for (let i = 0; i < 5; i++) {
    roundRadar1.addTarget("t" + i);
  }

  var roundRadar2 = new zeu.RoundRadar(
    document.getElementById('round-radar-2'), {
      speed: 1,
      bgColor: 'rgba(255, 255, 255, 0.03)',
      gridColor: 'rgba(255, 0, 0, 0.01)',
      lineColor: 'rgba(255, 0, 0, 1)',
      targetColor: 'rgba(0, 255, 0, 0.5)'
    });

  for (let i = 0; i < 10; i++) {
    roundRadar2.addTarget("t" + i);
  }

</script>
</body>
</html>
